<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>机场位置散点</title>
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="./static/js/echarts.min.js"></script>
  <script src="./static/js/china.js"></script>
</head>

<body>
  <div id="main" style="width:100%;height:700px;"></div>
</body>

</html>
<script>
  var geoCoordMap = {};
  $.ajax({
    url: './static/city-gps.json',
    type: 'get',
    dataType: 'json',
    async: false,
    success: function (res) {
      console.log(res.data);
      geoCoordMap = res.data;
    }
  })
  option = {
    backgroundColor: '#fff',
    title: {
      text: '机场分布',
      sublink: '',
      x: 'center',
      textStyle: {
        color: '#000'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return params.name;
      }
    },
    legend: {
      orient: 'vertical',
      top: 'bottom',
      left: 'right',
      data: ['航班位置'],
      textStyle: {
        color: '#000'
      }
    },
    visualMap: {
      min: 0,
      max: 200,
      calculable: true,
      inRange: {
        color: ['#50a3ba', '#eac736', '#d94e5d']
      },
      textStyle: {
        color: '#fff'
      }
    },
    geo: {
      map: 'china',
      itemStyle: {
        areaColor: '#484c4c',
        borderColor: '#fff'
      },
      emphasis: {
        itemStyle: {
          areaColor: '#6ed0c6'
        },
        label: {
          show: true
        }
      }
    },
    series: [
      {
        name: '航班位置',
        type: 'scatter',
        coordinateSystem: 'geo',
        data: geoCoordMap,
        symbolSize: 9,
        emphasis: {
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 3
          }
        }
      }
    ]
  }
  var chart = echarts.init(document.getElementById('main'));
  chart.setOption(option,true);
</script>